<template>
  <div class="lb-company-list">
    <top-nav />
    <div class="page-main">
      <el-row class="page-top-operate">
        <lb-button
          size="medium"
          type="primary"
          opType="add"
          @click="switchOpenTree"
          >全部展开/关闭</lb-button
        >
        <lb-button
          size="medium"
          type="primary"
          icon="el-icon-plus"
          opType="add"
          @click="addCompany"
          >添加公司</lb-button
        >
      </el-row>
      <el-table
        v-if="isShowTable"
        v-loading="isLoading"
        :data="tableData"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
        row-key="id"
        :default-expand-all="isOpenTree"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="pid" label="上级ID"> </el-table-column>
        <el-table-column prop="addr" label="公司地址"> </el-table-column>
        <el-table-column prop="top" label="排序值"> </el-table-column>
        <el-table-column prop="address" label="是否上架">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="
                updateCompany(scope.row.status, scope.row.id, scope.row.pid)
              "
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="table-operate">
              <lb-button
                size="mini"
                plain
                type="primary"
                @click="
                  editCompany(scope.row.id, scope.row.pid, scope.row.name)
                "
                >{{ $t('action.edit') }}</lb-button
              >
              <lb-button
                size="mini"
                plain
                type="danger"
                @click="confirmDel(scope.row.id, scope.row.pid)"
                >{{ $t('action.delete') }}</lb-button
              >
              <lb-button
                size="mini"
                plain
                type="success"
                @click="openDialog(scope.row.id)"
                >添加下级部门</lb-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <div class="dialog-inner">
        <el-input
          v-model="department"
          placeholder="请输入部门名称"
          maxlength="20"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">{{
          $t('action.cancel')
        }}</el-button>
        <el-button type="primary" @click="addEditDepartment">{{
          $t('action.comfirm')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogTitle: '添加下级部门',
      dialogType: 'add',
      department: '',
      isOpenTree: false,
      isShowTable: true,
      isLoading: false,
      tableData: [],
      id: '',
      centerDialogVisible: false
    }
  },
  activated () {
    this.getListData()
  },
  methods: {
    // 全部展开、关闭列表
    switchOpenTree () {
      this.isOpenTree = !this.isOpenTree
    },

    /**
     * @method 获取公司列表
     */
    getListData () {
      this.isLoading = true
      this.$api.getCompanyList().then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.tableData = res.data
        }
      })
    },

    /**
     * @method 上下架、删除公司/部门
     * @author xiaoli
     */
    async updateCompany (status, id, pid) {
      let opModel = pid === 0 ? 'company' : 'department'
      let opMethod = status === 2 ? 'del' : 'edit'
      let isW7 = this.$store.getters.isW7 === true ? '&' : '?'
      let opList = {
        'company': {
          // 上下架公司
          edit: {
            method: 'changeCompany',
            // path: `?company_id=${id}`,
            // param: {data: {status}}
            path: ``,
            param: { status, company_id: id }
          },
          // 删除公司
          del: {
            method: 'delCompany',
            path: `${isW7}company_id=${id}`,
            param: {}
          }
        },
        'department': {
          // 上下架部门
          edit: {
            method: 'changeDepartment',
            // path: `?department_id=${id}`,
            // param: {data: {status}}
            path: ``,
            param: { status, department_id: id }
          },
          // 删除部门
          del: {
            method: 'delDepartment',
            path: `${isW7}department_id=${id}`,
            param: {}
          }
        }
      }

      let { code } = await this.$api[opList[opModel][opMethod].method](opList[opModel][opMethod].path, opList[opModel][opMethod].param)

      if (code === 200) {
        this.$message.success(this.$t(status === 2 ? 'tips.successDel' : 'tips.successOper'))
        this.getListData()
      } else {
        if (status === 2) return
        this.getListData()
      }
    },
    /**
     * @method 编辑公司或者部门
     */
    editCompany (id, pid, name) {
      if (pid > 0) {
        this.centerDialogVisible = true
        this.id = id
        this.dialogType = 'edit'
        this.dialogTitle = '编辑部门'
        this.department = name
      } else {
        this.$router.push(`/company/addCompany?id=${id}`)
      }
    },

    addCompany () {
      this.$router.push('/company/addCompany')
    },

    /**
     * @method 用户确认删除公司
     */
    confirmDel (id, pid) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.updateCompany(2, id, pid)
      })
    },

    /**
     * @method 打开添加对话框
     */
    openDialog (id) {
      this.centerDialogVisible = true
      this.dialogTitle = '添加下级部门'
      this.id = id
      this.dialogType = 'add'
      this.department = ''
    },
    /**
     * @method 添加/编辑下级部门
     * @author xiaoli
     */
    async addEditDepartment () {
      let { id, department: name, dialogType } = this
      if (name === '') {
        this.$message.error('请输入部门名称后再提交')
      } else {
        let isW7 = this.$store.getters.isW7 === true ? '&' : '?'
        let { code } = dialogType === 'add' ? await this.$api.addDepartment({ name, pid: id }) : await this.$api.editDepartment(`${isW7}department_id=${id}`, { name })
        if (code === 200) {
          this.$message.success(this.$t('tips.successSub'))
          this.centerDialogVisible = false
          this.getListData()
        }
      }
      this.department = ''
    }
  },
  watch: {
    isOpenTree () {
      this.isShowTable = false
      this.$nextTick(() => {
        this.isShowTable = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-company-list {
  width: 100%;
  .el-dialog {
    .dialog-inner {
      display: flex;
      justify-content: center;
      .el-input {
        width: 200px;
      }
    }
  }
}
</style>
